import React, { memo, useMemo } from 'react';
import PropTypes from 'prop-types';
import './Passengers.css';

const Passenger = memo((props) => {
  const {
    id,
    birth,
    gender,
    name,
    licenseNo,
    ticketType,
    followAdultName,
    onRemove,
    onUpdate,
    showGenderMenu,
    showFollowAdult,
    showTicketTypeMenu,
  } = props;

  const isAdult = ticketType === 'adult';
  return (
    <li className="passenger">
      <i className="delete" onClick={() => onRemove(id)}>
        -
      </i>
      <ol className="items">
        {/* 姓名 */}
        <li className="item">
          <label htmlFor="" className="label name">
            姓名
          </label>
          <input
            type="text"
            value={name}
            placeholder="乘客姓名"
            className="input name"
            onChange={(e) => onUpdate(id, { id, name: e.target.value })}
          />
          <label className="ticket-type" onClick={() => showTicketTypeMenu(id)}>
            {isAdult ? '成人票' : '儿童票'}
          </label>
        </li>
        {/* 身份证 */}
        {isAdult && (
          <li className="item">
            <label htmlFor="" className="label licenseNo">
              身份证
            </label>
            <input
              type="text"
              value={licenseNo}
              placeholder="证件号码"
              className="input licenseNo"
              onChange={(e) => onUpdate(id, { id, licenseNo: e.target.value })}
            />
          </li>
        )}
        {/* 性别 */}
        {!isAdult && (
          <li className="item arrow">
            <label htmlFor="" className="label gender">
              性别
            </label>
            <input
              type="text"
              value={gender === 'male' ? '男' : gender === 'female' ? '女' : ''}
              placeholder="请选择"
              className="input gender"
              onClick={() => showGenderMenu(id)}
              readOnly
            />
          </li>
        )}
        {/* 出生日期 */}
        {!isAdult && (
          <li className="item">
            <label htmlFor="" className="label birthday">
              出生日期
            </label>
            <input
              type="text"
              value={birth}
              placeholder="如 1991"
              className="input birthday"
              onChange={(e) => onUpdate(id, { id, birth: e.target.value })}
            />
          </li>
        )}
        {/* 同行成人 */}
        {!isAdult && (
          <li className="item">
            <label htmlFor="" className="label gender">
              同行成人
            </label>
            <input
              type="text"
              value={followAdultName}
              placeholder="请选择"
              className="input gender"
              onClick={() => showFollowAdult(id)}
              readOnly
            />
          </li>
        )}
      </ol>
    </li>
  );
});
Passenger.propTypes = {
  id: PropTypes.number.isRequired,
  birth: PropTypes.string,
  followAdult: PropTypes.number,
  gender: PropTypes.string,
  name: PropTypes.string.isRequired,
  licenseNo: PropTypes.string,
  ticketType: PropTypes.string.isRequired,
  followAdultName: PropTypes.string,
  onRemove: PropTypes.func.isRequired,
  onUpdate: PropTypes.func.isRequired,
  showGenderMenu: PropTypes.func.isRequired,
  showFollowAdult: PropTypes.func.isRequired,
  showTicketTypeMenu: PropTypes.func.isRequired,
};

const Passengers = memo((props) => {
  const {
    passengers,
    createAdult,
    createChild,
    removePassenger,
    updatePassenger,
    showGenderMenu,
    showFollowAdult,
    showTicketTypeMenu,
  } = props;

  const nameMap = useMemo(() => {
    let ret = {};
    for (const passenger of passengers) {
      ret[passenger.id] = passenger.name;
    }
    return ret;
  }, [passengers]);
  return (
    <div className="passengers">
      <ul>
        {passengers &&
          passengers.length > 0 &&
          passengers.map((passenger) => {
            return (
              <Passenger
                {...passenger}
                followAdultName={nameMap[passenger.followAdult]}
                key={passenger.id}
                showTicketTypeMenu={showTicketTypeMenu}
                showFollowAdult={showFollowAdult}
                showGenderMenu={showGenderMenu}
                onRemove={removePassenger}
                onUpdate={updatePassenger}
              />
            );
          })}
      </ul>
      <section className="add">
        <div className="adult" onClick={() => createAdult()}>
          添加成人
        </div>
        <div className="child" onClick={() => createChild()}>
          添加儿童
        </div>
      </section>
    </div>
  );
});

Passengers.propTypes = {
  passengers: PropTypes.array.isRequired,
  createAdult: PropTypes.func.isRequired,
  createChild: PropTypes.func.isRequired,
  removePassenger: PropTypes.func.isRequired,
  updatePassenger: PropTypes.func.isRequired,
  showGenderMenu: PropTypes.func.isRequired,
  showFollowAdult: PropTypes.func.isRequired,
  showTicketTypeMenu: PropTypes.func.isRequired,
};

export default Passengers;
